<template>
    <div class="flex-box">
        <heads title="收藏"></heads>
        <div class="flex-item"  style="display: flex;flex-direction: column">
        <scroller :lockX="true"
                  @on-pulldown-loading="pull_down()"
                  @on-pullup-loading="pull_up()"
                  :pulldown-config="{downContent: '正在加载', loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                  :pullup-config="{ downContent: '正在加载',loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                  :use-pulldown=true
                  :use-pullup=false
                  ref="scrollerBottom"
        >
            <div>
                    <div  v-show="user_state">

                         <cell :title="item.title" is-link v-for="item in list" :link="{path:'/content?id='+item.id}"></cell>

                        <divider v-show="show2">你还未收藏哟！</divider>
                    </div>
              <divider v-show="!user_state">登录后查看</divider>
            </div>
        </scroller>
            <loading :show="show1" text=""></loading>
        </div>
        <foots></foots>
    </div>
</template>

<script>
    import  heads from  '../header'
    import  foots from  '../footer'
    import  {Group,Cell,Scroller,  Divider,Loading}  from  'vux'
    export default {
        name: "collect",
        components:{
            heads,
            foots,
            Group,
            Cell,
            Scroller,
            Divider,
            Loading
        },
        data(){
            return {
                list:[],
                no_collect:false,
                show1:false,
                page:1,
                pageCount:5,
                show2:false

            }
        },
        computed:{
            user_state(){
                return this.$store.state.user_state;
            }
        },
        methods:{
            pull_up() {
                this.show2=false;
                this.getCollect(1);
            },
            pull_down() {
                this.show2=false;
                this.getCollect(2);
            },
            getCollect(status=0){
                if(status==0){
                    this.show1=true
                }
                var _this=this;
                var info=[];
                this.$axios.get(this.$axios.defaults.baseURL+'collectList',{
                    params:{
                        page:_this.page,
                        pageSize:_this.pageCount
                    }
                }).then(function (res) {
                    _this.show1=false
                    var arr=[];
                    if(res.data.state==true){
                        if(res.data.data.length==0&&_this.page==1){
                            _this.no_collect=true;
                            _this.list=[];
                        }else {
                            for(var i=0;i<res.data.data.length;i++){
                                var a=[];
                                a['title']=res.data.data[i].article.title.substr(0,20)
                                a['id']=res.data.data[i].article_id;
                                arr[i]=a;
                            }
                            info=arr;

                        }
                        if(info.length==_this.pageCount){
                            _this.page=  _this.page+1;
                        }
                        for(var i=0;i<_this.list.length;i++){
                            for(var j=0;j<info.length;j++){
                                if(_this.list[i].id ==info[j].id){
                                    info.splice(j,1)
                                }
                            }
                        }

                        if (status == 1) {
                            setTimeout(() => {

                                _this.list=_this.list.concat(info)
                                _this.$refs.scrollerBottom.donePullup();
                                if(_this.page==1){
                                    if(_this.list.length==0){
                                        _this.show2=true;
                                    }
                                }
                            }, 1000)
                        }

                        else if (status == 2) {
                            setTimeout(() => {

                                _this.list= info.concat(_this.list)
                                _this.$refs.scrollerBottom.donePulldown();
                                if(_this.page==1){
                                    if(_this.list.length==0){
                                        _this.show2=true;
                                    }
                                }
                            }, 1000)

                        } else {

                            _this.list=_this.list.concat(info)
                            if(_this.page==1){
                                if(_this.list.length==0){
                                    _this.show2=true;
                                }
                            }
                        }

                    }else{
                        if(status==1){
                            _this.$refs.scrollerBottom.donePullup();
                        }
                        if(status==2){
                            _this.$refs.scrollerBottom.donePulldown();
                        }
                    }


                }).catch(function (err) {
                    _this.show1=false
                    console.log(err)
                })

            }
        },
        created(){
            this.getCollect(0)
        },
        activated(){
            this.show2=false;
            this.getCollect(0)
        }
    }
</script>

<style  lang="less" scoped>
    @import "../../assets/css/comm";
</style>